<template>
  <basic-container>
    <el-tabs type="card" class="tabs" v-model="activeName">
        <el-tab-pane v-for="item in tabs" :key="item.code" :name="item.code">
          <div slot="label" class="tab-label">
            <el-badge :hidden="item.code !== 'production_afternoon_tea' || !item.number" :value="item.number" class="item">
              {{ item.label }}
            </el-badge>
          </div>
        </el-tab-pane>
    </el-tabs>
    <cake v-if="activeName === 'production_cake'"></cake>
    <afternoonTea v-if="activeName === 'production_afternoon_tea'"></afternoonTea>
  </basic-container>
</template>

<script>
import cake from './cake'
import afternoonTea from './afternoonTea'
import { mapGetters } from 'vuex'
import {
  getProductionQueryPage, //查询列表
} from "@/api/scheduling/prodManage";

const tabs = [{
  label: '蛋糕',
  code: 'production_cake',
},{
  label: '下午茶 ',
  code: 'production_afternoon_tea',
}]
export default {
  data() {
    return {
      activeName: 'production_cake',
      tabs: [],
      afternoonTeaNum: 0
    };
  },
  methods: {
    filterTabs() {
      this.tabs = tabs.filter(item => this.permission[item.code])
      if (this.tabs && this.tabs.length) {
        this.activeName = this.tabs[0].code
      }
    },
    getAfternoonTeaNum() {
      return getProductionQueryPage({
        deptId: JSON.parse(window.localStorage.getItem("saber-areaId")).content,
        deliveryStartTime: this.dayjs().format('YYYY-MM-DD 00:00:00'),
        deliveryEndTime: this.dayjs().format('YYYY-MM-DD 23:59:59'),
        status: 0,
      }).then(res => {
        this.tabs[1]['number'] = res.data.data && res.data.data.total || 0;
      })
    },
    setNumberTimer() {
      this.timer = setInterval(async () => {
        await this.getAfternoonTeaNum();
        this.$forceUpdate();
      }, 60 * 1000)
    },
    clearTimer() {
      console.log('clearTimer')
      this.timer && window.clearInterval(this.timer)
      this.timer = null
    }
  },
  computed: {
    ...mapGetters(['permission'])
  },
  mounted() {
    this.filterTabs()
    this.setNumberTimer();
    this.getAfternoonTeaNum().then(() => {
      this.$forceUpdate();
    });
  },
  beforeDestroy() {
    this.clearTimer();
  },
  components: {
    cake,
    afternoonTea
  }
};
</script>
<style lang="scss" scoped>
.tabs {
  ::v-deep .el-tabs__content {
    padding: 0;
  }
  .tab-label {
    ::v-deep .el-badge__content.is-fixed {
      top: 10px;
      right: 5px;
    }
  }
}
</style>